@()
@main("Fruit shape phenotypes in image form-CBGD"){

	<div class="row">
		<div class="form-group col-sm-12">
			<h2 class="page-heading"
			style="text-align: left;
				border-bottom: 5px solid #e9f3f4">Fruit shape phenotypes in image form</h2>
		</div>
	</div>

	<label>Select the columns to display:</label>
	<div id="checkbox" class="checkbox">

	</div>

	<div id="toolbar">
			&nbsp;Keyword：
	</div>

	<table class="display table table-bordered" id="table" data-pagination="true" data-search="true"
	data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100, all]" data-search-align="left" data-multiple-search="true"
	style="table-layout: fixed;word-wrap: break-word">
		<thead>
			<tr>
				<th data-field="name" data-sortable="true">Accession name</th>
				<th data-field="site" data-sortable="true">Collection Site</th>
				<th data-field="kind" data-sortable="true">Type</th>
				<th data-field="shape" data-sortable="true">Fruit Shape</th>
				<th data-field="image" data-sortable="true">Fruit Shape Image</th>
			</tr>
		</thead>
	</table>

	<script>
		$(function () {
			var array = [ "Collection Site", "Type", "Fruit Shape"]
			var values=["site","kind","shape"]
			var html=""
			$.each(array, function (n, value) {
						html += "<label style='margin-right: 15px'>"+
								"<input type='checkbox' checked='checked' value='"+values[n]+"' onclick=\"setColumns('"+values[n]+"')\">"+value+
								"</label>"
					}
			);
			$("#checkbox").append(html)

			$.ajax({
				url: "@routes.PhenotypeController.getAllMelonShapes()",
				type: "get",
				dataType: "json",
				success: function (data) {
					$('#table').bootstrapTable({
						data: data
					});

				}
			})

		})

		function setColumns(value) {
			var element=$("input:checkbox[value="+value+"]")
			if (element.is(":checked")){
				$('#table').bootstrapTable('showColumn', value);
			}else{
				$('#table').bootstrapTable('hideColumn', value);
			}
		}
	</script>
}